<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./vue.js"></script>
    <!-- 引入 Vue.js -->
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        #app {
            background-color: #fff;
            padding: 0;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 1000px;
            height: 80vh;
            display: flex;
            overflow: hidden;
        }

        .sidebar {
            width: 250px;
            background-color: #f1f1f1;
            border-right: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            padding: 10px;
            justify-content: flex-start;
        }

        .sidebar input[type="text"] {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .sidebar li {
            padding: 10px;
            cursor: pointer;
            border-radius: 4px;
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .sidebar li:hover {
            background-color: #ddd;
        }

        .sidebar li.active {
            background-color: #e0f7fa;
        }

        .sidebar li img {
            margin-right: 10px;
        }

        .main {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            position: relative;
        }

        .main h1 {
            margin-top: 0;
            font-size: 24px;
        }

        .main .add-todo {
            display: flex;
            position: absolute;
            bottom: 20px;
            width: calc(100% - 40px);
        }

        .main .add-todo input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-right: 10px;
        }

        .main .add-todo button {
            padding: 10px;
            border: none;
            border-radius: 4px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
        }

        .main .add-todo button:hover {
            background-color: #0056b3;
        }

        .main ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            flex: 1;
            overflow-y: auto;
        }

        .main li {
            padding: 10px;
            background-color: #fafafa;
            border-radius: 4px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .main li span {
            flex: 1;
            margin-right: 10px;
        }

        .main li img {
            cursor: pointer;
        }

        .main li input[type="text"] {
            flex: 1;
            margin-right: 10px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 侧栏 -->
        <div class="sidebar">
            <!-- 搜索输入框 -->
            <input type="text" v-model="searchText" placeholder="搜索内容">
            <ul>
                <li :class="{ active: selectedCategory === '所有' }" @click="selectedCategory = '所有'">
                    <img src="https://img.icons8.com/windows/32/000000/list.png" /> 所有
                    <!-- 显示所有待办事项数量 -->
                    <span>{{ allTodos }}</span>
                </li>
                <li :class="{ active: selectedCategory === '今天' }" @click="selectedCategory = '今天'">
                    <img src="https://img.icons8.com/windows/32/000000/today.png" /> 今天
                    <!-- 显示今天待办事项数量 -->
                    <span>{{ todayTodos }}</span>
                </li>
                <li :class="{ active: selectedCategory === '最近7天' }" @click="selectedCategory = '最近7天'">
                    <img src="https://img.icons8.com/windows/32/000000/calendar.png" /> 最近7天
                    <!-- 显示最近7天待办事项数量 -->
                    <span>{{ recent7DaysTodos }}</span>
                </li>
                <hr />
                <!-- 自定义分类列表 -->
                <li v-for="(category, index) in categories" :key="index"
                    :class="{ active: selectedCategory === category.name }" @click="selectedCategory = category.name">
                    <img src="https://img.icons8.com/windows/32/000000/task.png" />
                    <!-- 并提供双击编辑功能 -->
                    <span v-if="!category.editing" @dblclick="editCategory(category)">{{ category.name }}</span>
                    <input v-else type="text" v-model="category.name" @keyup.enter="doneEditCategory(category)"
                        @blur="doneEditCategory(category)">
                    <!-- 显示待办事项数量 -->
                    <span>{{ categoryTodosCount(category.name) }}</span>
                </li>
            </ul>
            <div style="margin-top: auto;">
                <button @click="addCategory">
                    + 新建列表
                </button>
            </div>
        </div>
        <!-- 内容 -->
        <div class="main">
            <h1>{{ selectedCategory }}</h1>
            <!-- 待办事项列表 -->
            <ul>
                <!-- 遍历显示每个待办事项 -->
                <li v-for="todo in filteredTodos" :key="todo.id">
                    <input type="checkbox" v-model="todo.completed">
                    <span v-if="!todo.editing" :style="{ textDecoration: todo.completed ? 'line-through' : 'none' }"
                        @dblclick="editTodo(todo)">{{ todo.text }}</span>
                    <input v-else type="text" v-model="todo.text" @keyup.enter="doneEdit(todo)" @blur="doneEdit(todo)">
                    <img src="https://img.icons8.com/windows/32/000000/trash.png" @click="removeTodo(todo.id)" alt="删除"
                        v-if="!todo.editing">
                </li>
            </ul>
            <div class="add-todo">
                <input type="text" v-model="newTodoText" @keyup.enter="addTodo" placeholder="添加任务">
                <button @click="addTodo">添加</button>
            </div>
        </div>
    </div>
    <!-- Vue.js 实例 -->
    <script>
        new Vue({
            el: '#app',
            data: {
                //搜索框
                searchText: '',
                //新待办事项
                newTodoText: '',
                //当前选中
                selectedCategory: '所有',
                //待办列表
                todos: [],
                categories: [{ name: '待办事项', editing: false }]
            },
            methods: {
                //添加待办事项
                addTodo() {
                    if (this.newTodoText.trim()) {
                        this.todos.push({
                            id: Date.now(),
                            text: this.newTodoText,
                            category: this.selectedCategory === '所有' ? '未分类' : this.selectedCategory,
                            completed: false,
                            editing: false,
                            date: new Date()
                        });
                        this.newTodoText = '';
                    }
                },
                //删除待办事项
                removeTodo(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id);
                },
                addCategory() {
                    const newCategory = { name: '新建待办', editing: false };
                    this.categories.push(newCategory);
                    this.selectedCategory = newCategory.name;
                },
                editCategory(category) {
                    category.editing = true;
                },
                doneEditCategory(category) {
                    if (category.name.trim()) {
                        category.editing = false;
                    } else {
                        this.removeCategory(category);
                    }
                },
                removeCategory(category) {
                    //过滤移除的分类
                    this.categories = this.categories.filter(cat => cat !== category);
                    if (this.selectedCategory === category.name) {
                        this.selectedCategory = '所有';
                    }
                },
                //编辑待办事项
                editTodo(todo) {
                    todo.editing = true;
                },
                doneEdit(todo) {
                    if (todo.text.trim()) {
                        todo.editing = false;
                    } else {
                        this.removeTodo(todo.id);
                    }
                },
                //计算待办事项数量
                categoryTodosCount(categoryName) {
                    return this.todos.filter(todo => todo.category === categoryName).length;
                }
            },
            computed: {
                filteredTodos() {
                    const searchText = this.searchText.toLowerCase();
                    const filteredBySearchText = this.todos.filter(todo => todo.text.toLowerCase().includes(searchText));

                    if (this.selectedCategory === '所有') {
                        return filteredBySearchText;
                    } else if (this.selectedCategory === '今天') {
                        const today = new Date();
                        return filteredBySearchText.filter(todo => {
                            const todoDate = new Date(todo.date);
                            return (
                                todoDate.getDate() === today.getDate() &&
                                todoDate.getMonth() === today.getMonth() &&
                                todoDate.getFullYear() === today.getFullYear()
                            );
                        });
                    } else if (this.selectedCategory === '最近7天') {
                        //最近7天的待办事项
                        const today = new Date();
                        return filteredBySearchText.filter(todo => {
                            const todoDate = new Date(todo.date);
                            const diffTime = Math.abs(today - todoDate);
                            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                            return diffDays <= 7;
                        });
                    } else {
                        return filteredBySearchText.filter(todo => todo.category === this.selectedCategory);
                    }
                },
                allTodos() {
                    return this.todos.length;
                },
                //今天的待办事项数量
                todayTodos() {
                    const today = new Date();
                    return this.todos.filter(todo => {
                        const todoDate = new Date(todo.date);
                        return (
                            todoDate.getDate() === today.getDate() &&
                            todoDate.getMonth() === today.getMonth() &&
                            todoDate.getFullYear() === today.getFullYear()
                        );
                    }).length;
                },
                recent7DaysTodos() {
                    //获取日期对象
                    const today = new Date();
                    return this.todos.filter(todo => {
                        const todoDate = new Date(todo.date);
                        const diffTime = Math.abs(today - todoDate);
                        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                        return diffDays <= 7;
                    }).length;
                }
            }
        });
    </script>
</body>

</html>